<template>
  <template v-for="item in currentLinkData" :key="`${item.code}`">
    <div class="link-group-title">{{ item.name }}</div>
    <RadioGroup v-bind="attrs" v-model:value="selectId" @change="handleChange">
      <template v-for="itemChild in item.children" :key="itemChild.code">
        <Radio :value="itemChild.id" :disabled="itemChild.disabled" class="link-data-item">
          {{ itemChild.name }}
        </Radio>
      </template>
    </RadioGroup>
  </template>
</template>
<script lang="ts" setup>
  import { ref, onMounted, unref, watchEffect } from "vue"
  import { useDesign } from "/@/hooks/web/useDesign"
  import {} from "../data"
  import { propTypes } from "/@/utils/propTypes"
  import { useAttrs } from "/@/hooks/core/useAttrs"
  import { Radio } from "ant-design-vue"

  const RadioGroup = Radio.Group

  const selectId = ref<any>()
  const currentLinkData = ref<any[]>([])
  const selectLinkParam = ref<any>()
  const attrs = useAttrs({ excludeDefaultKeys: false })

  const emit = defineEmits(["register", "success", "update:value", "extParams"])

  const props = defineProps({
    value: propTypes.string,
    linkData: propTypes.any,
    allData: propTypes.any,
    treeSelectId: propTypes.string,
  })

  onMounted(() => {})

  watchEffect(() => {
    const treeSelectId = props.treeSelectId
    console.log("treeSelectId", treeSelectId)
    if (treeSelectId) {
      const allData = props.allData
      const linkData = props.linkData
      currentLinkData.value = linkData.get(allData.get(treeSelectId).code) || []
      console.log("currentLinkData", currentLinkData.value)
    }
  })

  const handleTreeSelect = (id) => {}
  const handleChange = (e) => {
    console.log("e", e)
    emit("update:value", unref(selectId))
  }

  defineExpose({
    handleTreeSelect,
  })
</script>

<style lang="less">
  .link-group-title {
    margin-bottom: 5px;
    margin-top: 10px;
    margin-left: 5px;
  }

  .link-data-item {
    margin-bottom: 5px;
  }
</style>
